import { defineComponent, ref } from 'vue'
import {
  NButton,
  NDataTable,
  NIcon,
  NInput,
  NPagination,
  NSpace,
  NTreeSelect
} from 'naive-ui'
import { SearchOutlined } from '@vicons/antd'
import Card from '@/components/card'
import { useColumns } from './use-columns'
import { useTable } from './use-table'
import { useDepartment } from '@/views/department/tab/department-manage-tab/use-department'
import SetHiveDbSizeModal from '@/views/data-manage/dialog/set-hive-db-size-modal'
import CreateProjectModal from '../../dialog/create-project-modal'
import ModProjectAliasModal from '../../dialog/mod-project-alias-modal'
import ModProjectDescModal from '../../dialog/mod-project-desc-modal'
import ModProjectDepartmentModal from '../../dialog/mod-project-department-modal'
import SetProjectManagerModal from '../../dialog/set-project-manager-modal'

const ProjectManageTab = defineComponent({
  name: 'ProjectManageTab',
  setup() {
    const showCreateProjectModalRef = ref(false)
    const { state, updateList, changePage, changePageSize, onOperationClick } =
      useTable()
    const { columnsRef } = useColumns(onOperationClick)
    //部门树下拉选项
    const { departmentVariables, getDepartmentOptions } = useDepartment()
    getDepartmentOptions()

    return {
      state,
      departmentVariables,
      columnsRef,
      onUpdatedList: updateList,
      changePage,
      changePageSize,
      showCreateProjectModalRef
    }
  },
  methods: {
    handleCreateProjectModalShowChange() {
      this.showCreateProjectModalRef = false
    },
    handleModProjectDepartmentModalShowChange() {
      this.state.modDepartmemtModalShow = false
    },
    handleModProjectAliasModalShowChange() {
      this.state.modAliasModalShow = false
    },
    handleModProjectDescModalShowChange() {
      this.state.modDescModalShow = false
    },
    handleSetHiveDbSizeModalShowChange() {
      this.state.setHiveDbSizeModalShow = false
    },
    handleSetProjectManagerModalShowChange() {
      this.state.setProjectManagerModalShow = false
    },
    onCreateProject() {
      this.showCreateProjectModalRef = true
    },
    isSysAdmin(): Boolean {
      let flag = false
      window.$store.state.userInfo.roles.forEach((item: { code: string }) => {
        if (item.code === 'sys_admin') {
          flag = true
          return
        }
      })
      return flag
    }
  },
  render() {
    return (
      <>
        <NSpace vertical>
          <Card>
            <NSpace justify='space-between'>
              <NButton
                onClick={this.onCreateProject}
                type='info'
                size='small'
                style={{ display: this.isSysAdmin() ? 'block' : 'none' }}
              >
                {window.$t('project.createProject')}
              </NButton>
              <NSpace>
                <NInput
                  v-model:value={this.state.searchParam.name}
                  clearable
                  size='small'
                  placeholder={window.$t('project.nameTips')}
                  style='width: 140px'
                />
                <NTreeSelect
                  v-model:value={this.state.searchParam.departmentId}
                  options={this.departmentVariables.departmentOptions}
                  label-field='name'
                  key-field='id'
                  children-field='subs'
                  clearable
                  size='small'
                  placeholder={window.$t('user.departmentTips')}
                  style='width: 180px'
                />
                <NButton type='info' size='small' onClick={this.onUpdatedList}>
                  <NIcon>
                    <SearchOutlined />
                  </NIcon>
                </NButton>
              </NSpace>
            </NSpace>
          </Card>
          <Card>
            <NSpace vertical>
              <NDataTable
                row-class-name='items'
                columns={this.columnsRef.columns}
                size='small'
                data={this.state.list}
                loading={this.state.loading}
                scrollX={this.columnsRef.tableWidth}
              />
              <NSpace justify='end'>
                <NPagination
                  v-model:page={this.state.page}
                  v-model:page-size={this.state.limit}
                  item-count={this.state.count}
                  show-size-picker
                  page-sizes={[10, 30, 50]}
                  show-quick-jumper
                  on-update:page={this.changePage}
                  on-update:page-size={this.changePageSize}
                />
              </NSpace>
            </NSpace>
          </Card>
        </NSpace>
        <CreateProjectModal
          showModal={this.showCreateProjectModalRef}
          onModalShowChange={this.handleCreateProjectModalShowChange}
          onRefreshList={this.onUpdatedList}
        ></CreateProjectModal>
        <ModProjectAliasModal
          showModal={this.state.modAliasModalShow}
          onModalShowChange={this.handleModProjectAliasModalShowChange}
          onRefreshList={this.onUpdatedList}
          proId={this.state.currentRecord.id}
        ></ModProjectAliasModal>
        <ModProjectDescModal
          showModal={this.state.modDescModalShow}
          onModalShowChange={this.handleModProjectDescModalShowChange}
          onRefreshList={this.onUpdatedList}
          proId={this.state.currentRecord.id}
        ></ModProjectDescModal>
        <ModProjectDepartmentModal
          showModal={this.state.modDepartmemtModalShow}
          onModalShowChange={this.handleModProjectDepartmentModalShowChange}
          onRefreshList={this.onUpdatedList}
          proId={this.state.currentRecord.id}
        ></ModProjectDepartmentModal>
        <SetHiveDbSizeModal
          showModal={this.state.setHiveDbSizeModalShow}
          onModalShowChange={this.handleSetHiveDbSizeModalShowChange}
          proName={this.state.currentRecord.name}
        ></SetHiveDbSizeModal>
        <SetProjectManagerModal
          showModal={this.state.setProjectManagerModalShow}
          onModalShowChange={this.handleSetProjectManagerModalShowChange}
          proId={this.state.currentRecord.id}
        ></SetProjectManagerModal>
      </>
    )
  }
})

export default ProjectManageTab
